<template>
  <div class="login-page page-container app-bg-page-color__bg">
    <div class="login-container flex-column flex-center column-center">
      <div class="main-container flex-auto full-width overflow-y">
        <div class="login-body app-bg-default-color__bg flex-column column-center flex-center">
          <div class="login-body__title app-primary-color__text bold-font app-font-size24">
            {{ $utils.lang('system.platform.name') }}
          </div>
          <div class="flex-auto flex-column column-center flex-center">
            <el-form class="login-body__form" label-width="100px" ref="loginForm" :rules="loginRules" :model="loginForm"
              @keyup.enter.native="userLogin">
              <el-form-item prop="account" :label="$utils.lang('pages.login.account')">
                <el-input class="flex-auto" prefix-icon="el-icon-mobile-phone" v-model="loginForm.account"
                  :placeholder="$utils.lang('pages.login.inputAccount')" clearable></el-input>
              </el-form-item>
              <el-form-item prop="password" :label="$utils.lang('pages.login.password')">
                <div class="flex-row">
                  <el-input class="flex-auto" prefix-icon="el-icon-lock" v-model="loginForm.password"
                    :placeholder="$utils.lang('pages.login.inputPassword')" show-password clearable>
                  </el-input>
                </div>
              </el-form-item>
              <div class="flex-row-between">
                <app-button class="login-body__button flex-auto" style="margin-right: 10px;" type="warning"
                  @click="resetLogin">
                  {{ $utils.lang('pages.login.reset') }}
                </app-button>
                <app-button class="login-body__button flex-auto" style="margin-left: 10px;" type="primary"
                  @click="userLogin" :loading="logining">
                  {{ logining ? $utils.lang('pages.login.logining') : $utils.lang('pages.login.login') }}
                </app-button>
              </div>
            </el-form>
          </div>
        </div>
      </div>
      <!-- <div class="login-footer flex-center column-center">
        <div class="app-font-size12">
          <span>© 2025 XXXXXX有限公司 - ICP备案 </span>
          <a target="_blank" href="https://beian.miit.gov.cn">
            苏ICP备88888888号
          </a>
        </div>
      </div> -->
    </div>
    <img class="footer-logo" :src="$utils.getIconByTheme('login/login_bg.png')" />
  </div>
</template>

<script>
import api from '../api/index.js';
const homePage = window.systemConfig.HOME_PAGE;
export default {
  name: 'LoginPage',
  components: {},
  data() {
    return {
      loginForm: {
        account: '',
        password: ''
      },
      loginRules: {
        account: [
          { required: true, message: this.$utils.lang('pages.login.inputAccount'), trigger: 'blur' }
        ],
        password: [
          { required: true, message: this.$utils.lang('pages.login.inputPassword'), trigger: 'blur' }
        ]
      },
      logining: false
    };
  },
  computed: {},
  beforeDestroy() { },
  created() {
    // 如果用户已登录，则直接进入首页
    if (this.$store.getters.userToken) {
      this.$log.debug('用户已登录，直接进入首页：', homePage);
      this.$router.replace({
        path: homePage
      });
    }
    this.loginForm.account = 'admin';
    this.loginForm.password = 'Admin123!@##';
  },
  methods: {
    resetLogin() {
      this.$refs.loginForm.resetFields();
    },
    userLogin() {
      this.$log.debug('用户点击登录');
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.logining = true;
          api
            .userLogin({
              userName: this.loginForm.account,
              password: this.$utils.encrypt(this.loginForm.password)
            })
            .then((res) => {
              this.logining = false;
              if (res.success) {
                this.$log.debug('用户登录成功');
                if (this.$store.getters.userToken) {
                  this.$router.replace({
                    path: homePage
                  });
                }
              } else {
                this.$log.error('用户登录失败，错误信息为：', res);
                this.$message.error(res.message || '用户登录失败，请稍后再试');
              }
            }).catch(e => {
              this.$log.error('用户登录失败，错误信息为：', e);
            });
        }
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.login-page {
  .login-container {
    position: fixed;
    z-index: 2;
    height: 100%;
    width: 100%;
  }

  .main-container {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 10px;
  }

  .login-body {
    height: 330px;
    width: 800px;
    border-radius: 6px;
    box-shadow: 0px 0px 20px -9px #dbd1c5;
    z-index: 1;
    padding: 35px 30px;
    margin: auto;

    &__title {
      letter-spacing: 0px;
    }

    &__logo {
      height: 30px;
      margin-bottom: 20px;
    }

    &__form {
      width: 450px;
    }

    &__button {
      margin-top: 10px;
    }
  }

  .tips-container {
    position: fixed;
    z-index: 3;
    top: 70px;
    left: 10px;
    width: 280px;
    height: 100px;
  }

  .login-tips {
    position: absolute;
    top: 0;
    left: 0;
    width: 250px;
    padding: 10px;
    border-radius: 3px 0 3px 3px;

    &.collspand {
      left: -250px;
    }

    &__link {
      margin-top: 10px;
    }

    &__logo {
      width: 20px;
      margin-left: 10px;

      &:first-child {
        margin-left: 0;
      }
    }

    &__expand {
      position: absolute;
      width: 30px;
      height: 30px;
      border-radius: 0 3px 3px 0;
      right: -30px;
      top: 0;
      box-shadow: 0px 0px 20px -9px #dbd1c5;
      cursor: pointer;

      &:hover {
        img {
          transform: rotate(360deg);
        }
      }
    }
  }

  .login-footer {
    padding: 10px;
  }

  .footer-logo {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 0;
  }
}
</style>
